<!DOCTYPE html>
<html lang="en">

<head>
  <title>管理员首页</title>

  <!-- Favicons -->
  <link href="../static/images/logoNK.ico" rel="icon">
  <!-- <link href="img/apple-touch-icon.png" rel="apple-touch-icon"> -->

  <!-- Bootstrap core CSS -->
  <link href="../static/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <!--external css-->
  <link href="../static/lib/font-awesome/css/font-awesome.css" rel="stylesheet" />
  <link href="../static/lib/advanced-datatable/css/demo_page.css" rel="stylesheet" />
  <link href="../static/lib/advanced-datatable/css/demo_table.css" rel="stylesheet" />
  <link rel="stylesheet" href="../static/lib/advanced-datatable/css/DT_bootstrap.css" />
  <!-- Custom styles for this template -->
  <link href="../static/css/style.css" rel="stylesheet">
  <link href="../static/css/style-responsive.css" rel="stylesheet">

</head>

<body>
  <section id="container">
    <!-- **********************************************************************************************************************************************************
        TOP BAR CONTENT & NOTIFICATIONS
        *********************************************************************************************************************************************************** -->
    <!--header start-->
    <header class="header black-bg">
      <div class="sidebar-toggle-box">
        <div class="fa fa-bars tooltips" data-placement="right" data-original-title="Toggle Navigation"></div>
      </div>
      <!--logo start-->
      <a class="logo"><b>ADMINISTRAT<span>OR</span></b></a>
      <!--logo end-->
      <div class="nav notify-row" id="top_menu">

      </div>
      <div class="top-menu">
        <ul class="nav pull-right top-menu">
          <li><a class="logout" href="{{ url_for('auth.admin_login') }}">Logout</a></li>
        </ul>
      </div>
    </header>
    <!--header end-->
    <!-- **********************************************************************************************************************************************************
        MAIN SIDEBAR MENU
        *********************************************************************************************************************************************************** -->
    <!--sidebar start-->
    <aside>
      <div id="sidebar" class="nav-collapse ">
        <!-- sidebar menu start-->
        <ul class="sidebar-menu" id="nav-accordion">
          <p class="centered"><img src="../static/images/logo2.png" class="img-circle" width="80"></a></p>
          <h5 class="centered">Manage</h5>
          <li class="sub-menu">
            <a href="{{url_for('admin.admin_update')}}">
              <i class="fa fa-cogs"></i>
              <span>Modifly bills</span>
            </a>
          </li>
          <li class="sub-menu">
            <a href="{{ url_for('admin.admin_delete') }}">
              <i class="fa fa-tasks"></i>
              <span>Delete bills</span>
            </a>
          </li>
          <li class="sub-menu">
            <a class="active" href="javascript:;">
              <i class="fa fa-th"></i>
              <span>Data Tables</span>
            </a>
          </li>
        </ul>
        <!-- sidebar menu end-->
      </div>
    </aside>
    <!--sidebar end-->
    <!-- **********************************************************************************************************************************************************
        MAIN CONTENT
        *********************************************************************************************************************************************************** -->
    <!--main content start-->
    <section id="main-content">
      <section class="wrapper">
        <h3><i class="fa fa-angle-right"></i> BILLS</h3>
        <div class="row mb">
          <!-- page start-->
          <div class="content-panel">
            <div class="adv-table">
              <table cellpadding="0" cellspacing="0" border="0" class="display table table-bordered"
                id="hidden-table-info">
                <thead>
                  <tr>
                    <th>编号</th>
                    <th>使用人</th>
                    <th class="hidden-phone">数额(￥)</th>
                    <th class="hidden-phone">原因</th>
                    <th class="hidden-phone">时间</th>
                  </tr>
                </thead>
                  <tbody>
                    {% for message in result %}
                      <tr class="gradeA">
                        <td>{{ message[0] }}</td>
                        <td>{{ message[1] }}</td>
                        <td>{{ message[2] }}</td>
                        <td>{{ message[3] }}</td>
                        <td>{{ message[4] }}</td>
                      </tr>
                    {% endfor %}
                  </tbody>
              </table>
            </div>
          </div>
          <!-- page end-->
        </div>
        <!-- /row -->
      </section>
      <!-- /wrapper -->
    </section>
    <!-- /MAIN CONTENT -->
    <!--main content end-->

  </section>
  <!-- js placed at the end of the document so the pages load faster -->
  <script src="../static/lib/jquery/jquery.min.js"></script>
  <script type="text/javascript" language="javascript" src="../static/lib/advanced-datatable/js/jquery.js"></script>
  <script src="../static/lib/bootstrap/js/bootstrap.min.js"></script>
  <script class="include" type="text/javascript" src="../static/lib/jquery.dcjqaccordion.2.7.js"></script>
  <script src="../static/lib/jquery.scrollTo.min.js"></script>
  <script src="../static/lib/jquery.nicescroll.js" type="text/javascript"></script>
  <script type="text/javascript" language="javascript"
    src="../static/lib/advanced-datatable/js/jquery.dataTables.js"></script>
  <script type="text/javascript" src="../static/lib/advanced-datatable/js/DT_bootstrap.js"></script>
  <!--common script for all pages-->
  <script src="../static/lib/common-scripts.js"></script>
  <!--script for this page-->
  <script type="text/javascript">
    /* Formating function for row details */
    function fnFormatDetails(oTable, nTr) {
      var aData = oTable.fnGetData(nTr);

      var sOut = '<form method="post" action="#" >"';
      sOut += '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';
      sOut += '<tr><td>编号</td><td><input readonly name="billno" class="form-control" value="' + aData[1] + '"</input></td></tr>';
      sOut += '<tr><td>员工</td><td><input readonly name="user" class="form-control" value="' + aData[2] + '"</input></td></tr>';
      sOut += '<tr><td>金额(￥)</td><td><input name="amount" class="form-control" value="' + aData[3] + '"</input></td></tr>';
      sOut += '<tr><td>原因</td><td><input name="reason" class="form-control" value="' + aData[4] + '"</input></td></tr>';
      sOut += '<tr><td>时间</td><td><input name="time" class="form-control" value="' + aData[5] + '"</input></td></tr>';
      sOut += '<tr><td><button type="submit" class="btn btn-sm btn-info">modifly</button></td></tr>';
      sOut += '</table>';
      sOut += '</form>';
      return sOut;
    }

    $(document).ready(function () {
      /*
       * Insert a 'details' column to the table
       */
      var nCloneTh = document.createElement('th');
      var nCloneTd = document.createElement('td');
      nCloneTd.innerHTML = '<img src="../static/lib/advanced-datatable/images/details_open.png">';
      nCloneTd.className = "center";

      $('#hidden-table-info thead tr').each(function () {
        this.insertBefore(nCloneTh, this.childNodes[0]);
      });

      $('#hidden-table-info tbody tr').each(function () {
        this.insertBefore(nCloneTd.cloneNode(true), this.childNodes[0]);
      });

      /*
       * Initialse DataTables, with no sorting on the 'details' column
       */
      var oTable = $('#hidden-table-info').dataTable({
        "aoColumnDefs": [{
          "bSortable": false,
          "aTargets": [0]
        }],
        "aaSorting": [
          [1, 'asc']
        ]
      });

      /* Add event listener for opening and closing details
       * Note that the indicator for showing which row is open is not controlled by DataTables,
       * rather it is done here
       */
      $('#hidden-table-info tbody td img').live('click', function () {
        var nTr = $(this).parents('tr')[0];
        if (oTable.fnIsOpen(nTr)) {
          /* This row is already open - close it */
          this.src = "../static/lib/advanced-datatable/images/details_open.png";
          oTable.fnClose(nTr);
        } else {
          /* Open this row */
          this.src = "../static/lib/advanced-datatable/images/details_close.png";
          oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details');
        }
      });
    });
  </script>
</body>

</html>